<header class="fixed top-0 left-0 right-0 z-20 shadow-lg" [ngClass]="['bg' + primary]">
	<button
		class="absolute flex w-10 h-10 overflow-hidden border-transparent top-5 left-2 toggle md:hidden"
		title="Toggle menu"
		type="button"
		(click)="toggleMenu($event)"
	>
		<svg
			*ngIf="!(menuOpen | async)"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 512 512"
			class="h-8 sm:h-10"
			[ngClass]="['text' + contrast]"
		>
			<rect width="352" height="32" x="80" y="96" class="fill-current" />
			<rect width="352" height="32" x="80" y="240" class="fill-current" />
			<rect width="352" height="32" x="80" y="384" class="fill-current" />
		</svg>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 512 512"
			class="h-8 sm:h-10"
			[ngClass]="['text' + contrast]"
			*ngIf="menuOpen | async"
		>
			<polygon
				class="fill-current"
				points="427.314 107.313 404.686 84.687 256 233.373 107.314 84.687 84.686 107.313 233.373 256 84.686 404.687 107.314 427.313 256 278.627 404.686 427.313 427.314 404.687 278.627 256 427.314 107.313"
			/>
		</svg>
	</button>
	<div class="container flex items-center justify-center h-20 px-4 mx-auto md:justify-between">
		<div class="flex items-center flex-shrink-0">
			<a class="flex items-center" title="Back to homepage" [routerLink]="['/']">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="w-auto h-8 sm:h-10"
					viewBox="0 0 258.839 35.658"
				>
					<g id="Group_12" data-name="Group 12" transform="translate(-862.627 -615)">
						<path
							id="Path_8"
							data-name="Path 8"
							d="M2.974-3.039V-31.295h10.4l4.377,5.888,4.392-5.888H32.531V-3.039H21.812V-17.185l-4.059,5.462-4.059-5.462V-3.039Zm42.608,0H34.862l8.4-28.256h15.27l8.4,28.256h-10.7l-1.4-4.777H46.977Zm3.346-11.443h3.964L50.909-21.5ZM69.287-3.039V-31.295h10.4l4.377,5.888,4.392-5.888H98.845V-3.039H88.125V-17.185l-4.059,5.462-4.059-5.462V-3.039Zm34.188-28.256h15.143q4.646,0,7.017,2.12a7.347,7.347,0,0,1,2.371,5.768,6.838,6.838,0,0,1-3.156,6.073,8.58,8.58,0,0,1,2.838,2.676,6.983,6.983,0,0,1,.967,3.805,7.583,7.583,0,0,1-2.18,5.685,8.38,8.38,0,0,1-6.113,2.129H103.475Zm10.719,5.685v5.5h.27a3.842,3.842,0,0,0,2.474-.62,2.683,2.683,0,0,0,.729-2.139q0-2.74-2.823-2.74Zm0,10.24v6.11h.333a4.107,4.107,0,0,0,2.624-.657,2.821,2.821,0,0,0,.785-2.268q0-3.185-3-3.185ZM140.311-3.039H129.591L138-31.295h15.27l8.4,28.256h-10.7l-1.4-4.777h-7.865Zm3.346-11.443h3.964L145.639-21.5Zm54.96-16.813v12.813q0,8.388-3.671,12.147a11.414,11.414,0,0,1-8.38,3.759,11.38,11.38,0,0,1-6.478-2.074,11.015,11.015,0,0,1-4.305-5.472,26.6,26.6,0,0,1-1.237-8.916V-31.295h10.719V-18.2a6.734,6.734,0,0,0,.317,2.666,1.029,1.029,0,0,0,.951.555,1.11,1.11,0,0,0,1.126-1.009,16.742,16.742,0,0,0,.238-3.4V-31.295Zm4.456,28.256V-31.295h10.7V-3.039Z"
							transform="translate(907.69 649.639)"
							class="fill-current"
							[ngClass]="['text' + primaryAlt]"
						/>
						<g id="Group_11" data-name="Group 11" transform="translate(862.627 615)">
							<path
								id="Path_7"
								data-name="Path 7"
								d="M4.457,0H31.2a4.457,4.457,0,0,1,4.457,4.457V31.2A4.457,4.457,0,0,1,31.2,35.658H4.457A4.457,4.457,0,0,1,0,31.2V4.457A4.457,4.457,0,0,1,4.457,0Z"
								transform="translate(0 0)"
								fill="#6d28d9"
							/>
							<g id="Group_5" data-name="Group 5" transform="translate(5.244 6.341)">
								<g id="Artboard_1" data-name="Artboard 1">
									<path
										id="Shape_316_1"
										data-name="Shape 316 1"
										d="M539.151,72.067c2.446,4.4,10.223,3.83,12.095,0a6.568,6.568,0,0,1,2.467,1.463c-.091,3.807-2.467,5.169-2.467,5.169l.082.884c2.708-.784,3.717-.7,3.521-5.3,1.361,1.117,2.592,3.237,2.465,4.6-.132,1.416-2.15,5.675-1.9,5.6a92.614,92.614,0,0,1-8.913,3.382A3.093,3.093,0,0,0,544.45,86.1a13.49,13.49,0,0,0-1.883,1.878c-2.477-.9-4.669-1.9-6.96-2.872l-1.8-.663-.819-2.1c-1.1-2.722-1.6-4.238.164-6.627.384-.519,1.053-1.647,1.642-1.894-.115,3.9-1.292,5.756,3.107,5.76l.082-.884s-1.91-.239-2.374-5.169Zm2.188,11.824c-.219.294-.355.368-.573.663.055.147-.218.184-.164.331a3.024,3.024,0,0,0,.9,1.215,2.812,2.812,0,0,0,1.8-1.215C543.084,84.421,541.779,83.658,541.339,83.892Zm5.977,0c-.437.294-.955.7-1.392.994.136.221.846.773.983.994.412.248.312.451.819.221a1.479,1.479,0,0,0,.9-1.325c-.218-.258-.437-.626-.655-.884h-.655Z"
										transform="translate(-531.99 -72.067)"
										fill="#fff"
										fill-rule="evenodd"
									/>
								</g>
								<path
									id="Shape_316_1-2"
									data-name="Shape 316 1"
									d="M560,133.183c-1.328.368-2.544.816-3.986,1.1a33.534,33.534,0,0,1-.412,6.406C557.337,138.675,559.825,135.215,560,133.183Z"
									transform="translate(-539.007 -117.59)"
									fill="#fff"
									fill-rule="evenodd"
								/>
								<path
									id="Shape_316_1-3"
									data-name="Shape 316 1"
									d="M555.6,133.183c1.375.368,2.634.816,4.127,1.1a32.416,32.416,0,0,0,.427,6.406C558.362,138.675,555.787,135.215,555.6,133.183Z"
									transform="translate(-551.328 -117.59)"
									fill="#fff"
									fill-rule="evenodd"
								/>
							</g>
						</g>
					</g>
				</svg>
			</a>
		</div>
		<nav class="hidden md:block">
			<a
				class="p-3 font-medium"
				[ngClass]="['text' + contrast, rla.isActive ? 'underline' : 'no-underline']"
				#rla
				routerLinkActive
				[routerLink]="['/components']"
			>
				Components
			</a>
			<a
				class="p-3 font-medium"
				[ngClass]="['text' + contrast, rla.isActive ? 'underline' : 'no-underline']"
				#rla
				routerLinkActive
				[routerLink]="['/templates']"
			>
				Templates
			</a>
			<a
				class="p-3 font-medium"
				[ngClass]="['text' + contrast, rla.isActive ? 'underline' : 'no-underline']"
				#rla
				routerLinkActive
				[routerLink]="['/docs']"
			>
				Documentation
			</a>
		</nav>
	</div>
</header>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 56" id="menu">
		<path
			d="M48.33,45.6H18a14.17,14.17,0,0,1,0-28.34H78.86a17.37,17.37,0,0,1,0,34.74H42.33l-21-21.26L47.75,4"
		/>
	</symbol>
</svg>
